<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3 Vue双向绑定</title>
</head>
<body>

<!--老韩解读
    1. v-bind是数据单向渲染: data数据池绑定的数据变化，会影响view
    2. v-model="hobby.val" 是数据的双向渲染,
        (1)data数据池绑定的数据变化，会影响view 【底层的机制是 Data Bindings】
        (2)view 关联的的元素值变化, 会影响到data数据池的数据【底层机制是Dom Listeners】
特性	            v-model	            :value
绑定方向	        双向绑定	            单向绑定
数据同步机制	    自动更新数据源	    不更新数据源
是否需要事件监听器	不需要（内置 @input）	需要手动添加监听器
适用场景	        输入框/表单元素的交互	仅用于展示或静态绑定值
-->
<div id="app">
    <h1>{{message}}</h1>
    <input type="text" v-model="hobby.var"><br><br>
    <input type="text" :value="hobby.var"><br><br>
    <p>你输入的爱好是:{{hobby.var}}</p>

</div>

<script src="js/vue.js"></script>
<script>
    let vm=new Vue({
        el:"#app",
        data:{
            message:"hi,输入你的爱好",
            hobby:{
                var:"购物"
            }
        }
    })
    console.log("vm=>", vm);
</script>

</body>
</html>

<!--
在Vue.js中，v-model 和 :value 是两种绑定数据的方式，但它们有明显的区别，尤其在数据交互和绑定机制上：

1. v-model
	•	双向绑定：
	•	v-model 实现数据的 双向绑定。
	•	当数据源（data 中的值）发生变化时，视图会自动更新。
	•	当用户在输入框中修改内容时，数据源也会被自动更新。
	•	底层机制：
	•	v-model 是 :value 和 @input 的语法糖。
	•	它绑定了元素的 value 属性（相当于 :value）。
	•	同时监听了 input 事件，将用户输入的值更新回数据源。
	•	等价于：

<input :value="hobby.var" @input="hobby.var = $event.target.value">



2. :value
	•	单向绑定：
	•	:value 是 单向绑定，仅将数据源的值绑定到输入框的 value 属性。
	•	当数据源（data 中的值）变化时，视图会更新。
	•	但用户在输入框中修改内容后，数据源 不会自动更新，因为没有事件监听。
	•	使用场景：
	•	常用于只需要展示值但不需要修改数据的场景。
	•	如果需要监听用户输入并手动更新数据，需要显式地添加事件监听器，例如 @input。

在你的代码中对比：

<input type="text" v-model="hobby.var"><br><br>
<input type="text" :value="hobby.var"><br><br>

	•	第一行：v-model
	•	绑定的是 hobby.var，数据会双向同步：
	•	用户输入新值时，hobby.var 自动更新。
	•	如果 hobby.var 改变，输入框内容也会立即更新。
	•	第二行：:value
	•	输入框会显示 hobby.var 的值，但如果用户修改输入框内容，hobby.var 不会变，除非额外添加事件监听器。

总结：

特性	v-model	:value
绑定方向	双向绑定	单向绑定
数据同步机制	自动更新数据源	不更新数据源
是否需要事件监听器	不需要（内置 @input）	需要手动添加监听器
适用场景	输入框/表单元素的交互	仅用于展示或静态绑定值

如果你需要处理用户输入并更新数据源，v-model 是首选。如果只需要展示数据值，使用 :value 即可。

-->